<template>
  <!-- 添加和修改员工对话框 -->
  <el-dialog
    :visible.sync="isVisible"
    :title="title"
    width="40%"
    @close="closeDialog">
    <el-form
      ref="empForm"
      :model="empForm"
      :rules="empForm_rules"
      label-width="110px">
      <el-form-item prop="account" label="工号">
        <el-input v-model="empForm.account" :validate-event="false"></el-input>
      </el-form-item>
      <el-form-item prop="name" label="用户名称">
        <el-input v-model="empForm.name" :validate-event="false"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="empForm.password" :type="passwordType" :validate-event="false"></el-input>
        <span class="show-pwd" @click="showPwd">
          <svg-icon
            :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
          />
        </span>
      </el-form-item>
      <el-form-item prop="framework" label="组织架构">
        <el-input v-model="empForm.framework"></el-input>
      </el-form-item>
      <el-form-item prop="role_id" label="角色">
        <el-select v-model="empForm.role_id" clearable placeholder="请选择">
          <el-option :value="1" label="系统管理员" />
          <el-option :value="2" label="操作管理员" />
          <el-option :value="3" label="操作员" />
        </el-select>
      </el-form-item>
    </el-form>
    <span class="pl-5 colorRed">提示：带*的是必填项</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="isVisible = false">取 消</el-button>
      <el-button type="primary" @click="onSubmit('empForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addEmplyoee, updateEmpInfo} from "@/api/emp.js";
export default {
  name: "EmpDialog",
  data() {
    return {
      isDisable:false,
      //控制员工对话框显示
      isVisible: this.isShow,
      //密码
      passwordType: "password",
      // 员工表单
      empForm: {
        user_id:"",
        account: "",
        name: "",
        password: "",
        framework:"",
        role_id: "",
      },
      //表单校验
      empForm_rules: {
        account: [
          {
            required: true,
            message: "请输入工号",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
         framework: [
          {
            required: true,
            message: "请输入组织架构",
            trigger: "blur",
          },
        ],
        role_id: [
          {
            required: true,
            message: "请选择角色",
            trigger: "change",
          },
        ],
      },
    };
  },
  props: {
    isShow: Boolean,
    dialogRow: Object,
    title:String,
  },
  created() {
    
  },
  mounted() {
    if (this.title === "修改员工信息") {
      this.empForm.account = this.dialogRow.account
      this.empForm.name=this.dialogRow.name
      this.empForm.framework=this.dialogRow.framework
      this.empForm.role_id=this.dialogRow.role_id
      this.empForm.password=this.dialogRow.password
      this.empForm.user_id=this.dialogRow.user_id
    } else {
      //清空表单
      this.$nextTick(() => {
        this.$refs["empForm"].resetFields();
      });
    }
  },
  methods: {
    //表单提交
    onSubmit(empForm) {
      this.$refs[empForm].validate(async(valid) => {
        if (valid) {
          // add
          if (this.title === "添加员工信息") {
              await addEmplyoee(this.empForm)
              this.$message.success('添加员工成功!')          
          } else {
            //edit
              await updateEmpInfo(this.empForm)
              this.$message.success('修改员工成功!')
           }
            this.$refs["empForm"].resetFields(); //清空表单
            this.isVisible = false; //关闭对话框
            this.$emit("getEmpList"); //刷新列表
        }
      });
    },
    //关闭表单
    closeDialog() {
      this.$emit("closeDialog");
    },
    showPwd() {
      if (this.passwordType === "password") {
          this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
    },
  },
};
</script>

<style lang = "scss" scoped>
.show-pwd {
  position: absolute;
  right: 10px;
  font-size: 16px;
  cursor: pointer;
  user-select: none;
}

</style>
